(function ($) {
    'use strict';

    /* line chart area */
    var lineChartArea = function () {
        new Chartist.Line('#lineChartArea', {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [
                        [5, 9, 7, 8, 5, 3, 5, 4, ]
                    ]
        }, {
            low: 0,
            showArea: true,
            fullWidth: true
        });
    }
    /* line chart area -- end */

    /* line scattered chart */
    var lineScattered = function () {
        var times = function (n) {
            return Array.apply(null, new Array(n));
        };

        var data = times(52).map(Math.random).reduce(function (data, rnd, index) {
            data.labels.push(index + 1);
            data.series.forEach(function (series) {
                series.push(Math.random() * 100)
            });

            return data;
        }, {
            labels: [],
            series: times(4).map(function () {
                return new Array()
            })
        });

        var options = {
            showLine: false,
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 13 === 0 ? 'W' + value : null;
                }
            }
        };

        var responsiveOptions = [
                    ['screen and (min-width: 640px)',
                {
                    axisX: {
                        labelInterpolationFnc: function (value, index) {
                            return index % 4 === 0 ? 'W' + value : null;
                        }
                    }
                    }]
                ];

        new Chartist.Line('#lineScattered', data, options, responsiveOptions);
    }
    /* line scattered chart -- end */

    /* using events */
    var usingEvents = function () {
        var chart = new Chartist.Line('#usingEvents', {
            labels: [1, 2, 3, 4, 5],
            series: [
                        [12, 9, 7, 8, 5]
                    ]
        });

        // Listening for draw events that get emitted by the Chartist chart
        chart.on('draw', function (data) {
            // If the draw event was triggered from drawing a point on the line chart
            if (data.type === 'point') {
                // We are creating a new path SVG element that draws a triangle around the point coordinates
                var triangle = new Chartist.Svg('path', {
                    d: ['M',
                                data.x,
                                data.y - 15,
                                'L',
                                data.x - 15,
                                data.y + 8,
                                'L',
                                data.x + 15,
                                data.y + 8,
                                'z'
                            ].join(' '),
                    style: 'fill-opacity: 1'
                }, 'ct-area');

                // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
                data.element.replace(triangle);
            }
        });
    }
    /* using events -- end */

    /* bipolar */
    var bipolar = function () {
        new Chartist.Line('#bipolar', {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [
                        [1, 2, 3, 1, -2, 0, 1, 0],
                        [-2, -1, -2, -1, -2.5, -1, -2, -1],
                        [0, 0, 0, 1, 2, 2.5, 2, 1],
                        [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
                    ]
        }, {
            high: 3,
            low: -3,
            showArea: true,
            showLine: false,
            showPoint: false,
            fullWidth: true,
            axisX: {
                showLabel: false,
                showGrid: false
            }
        });
    }
    /* bipolar -- end */

    /* smile animation */
    var smileAnimation = function () {
        var chart = new Chartist.Line('#smileAnimation', {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            series: [
                        [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
                        [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
                        [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
                        [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
                    ]
        }, {
            low: 0
        });

        // Let's put a sequence number aside so we can use it in the event callbacks
        var seq = 0,
            delays = 80,
            durations = 500;

        // Once the chart is fully created we reset the sequence
        chart.on('created', function () {
            seq = 0;
        });

        // On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
        chart.on('draw', function (data) {
            seq++;

            if (data.type === 'line') {
                // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
                data.element.animate({
                    opacity: {
                        // The delay when we like to start the animation
                        begin: seq * delays + 2000,
                        // Duration of the animation
                        dur: durations,
                        // The value where the animation should start
                        from: 0,
                        // The value where it should end
                        to: 1
                    }
                });
            } else if (data.type === 'label' && data.axis === 'x') {
                data.element.animate({
                    y: {
                        begin: seq * delays,
                        dur: durations,
                        from: data.y + 100,
                        to: data.y,
                        // We can specify an easing function from Chartist.Svg.Easing
                        easing: 'easeOutQuart'
                    }
                });
            } else if (data.type === 'label' && data.axis === 'y') {
                data.element.animate({
                    x: {
                        begin: seq * delays,
                        dur: durations,
                        from: data.x - 100,
                        to: data.x,
                        easing: 'easeOutQuart'
                    }
                });
            } else if (data.type === 'point') {
                data.element.animate({
                    x1: {
                        begin: seq * delays,
                        dur: durations,
                        from: data.x - 10,
                        to: data.x,
                        easing: 'easeOutQuart'
                    },
                    x2: {
                        begin: seq * delays,
                        dur: durations,
                        from: data.x - 10,
                        to: data.x,
                        easing: 'easeOutQuart'
                    },
                    opacity: {
                        begin: seq * delays,
                        dur: durations,
                        from: 0,
                        to: 1,
                        easing: 'easeOutQuart'
                    }
                });
            } else if (data.type === 'grid') {
                // Using data.axis we get x or y which we can use to construct our animation definition objects
                var pos1Animation = {
                    begin: seq * delays,
                    dur: durations,
                    from: data[data.axis.units.pos + '1'] - 30,
                    to: data[data.axis.units.pos + '1'],
                    easing: 'easeOutQuart'
                };

                var pos2Animation = {
                    begin: seq * delays,
                    dur: durations,
                    from: data[data.axis.units.pos + '2'] - 100,
                    to: data[data.axis.units.pos + '2'],
                    easing: 'easeOutQuart'
                };

                var animations = {};
                animations[data.axis.units.pos + '1'] = pos1Animation;
                animations[data.axis.units.pos + '2'] = pos2Animation;
                animations['opacity'] = {
                    begin: seq * delays,
                    dur: durations,
                    from: 0,
                    to: 1,
                    easing: 'easeOutQuart'
                };

                data.element.animate(animations);
            }
        });

        // For the sake of the example we update the chart every time it's created with a delay of 10 seconds
        chart.on('created', function () {
            if (window.__exampleAnimateTimeout) {
                clearTimeout(window.__exampleAnimateTimeout);
                window.__exampleAnimateTimeout = null;
            }
            window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
        });
    }
    /* smile animation -- end */

    /* path animation */
    var pathAnimation = function () {
        var chart = new Chartist.Line('#pathAnimation', {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            series: [
                        [1, 5, 2, 5, 4, 3],
                        [2, 3, 4, 8, 1, 2],
                        [5, 4, 3, 2, 1, 0.5]
                    ]
        }, {
            low: 0,
            showArea: true,
            showPoint: false,
            fullWidth: true
        });

        chart.on('draw', function (data) {
            if (data.type === 'line' || data.type === 'area') {
                data.element.animate({
                    d: {
                        begin: 2000 * data.index,
                        dur: 2000,
                        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                        to: data.path.clone().stringify(),
                        easing: Chartist.Svg.Easing.easeOutQuint
                    }
                });
            }
        });
    }
    /* path animation -- end */

    /* line interpolation */
    var lineInterpolation = function () {
        var chart = new Chartist.Line('#lineInterpolation', {
            labels: [1, 2, 3, 4, 5],
            series: [
                        [1, 5, 10, 0, 1],
                        [10, 15, 0, 1, 2]
                    ]
        }, {
            // Remove this configuration to see that chart rendered with cardinal spline interpolation
            // Sometimes, on large jumps in data values, it's better to use simple smoothing.
            lineSmooth: Chartist.Interpolation.simple({
                divisor: 2
            }),
            fullWidth: true,
            chartPadding: {
                right: 20
            },
            low: 0
        });
    }
    /* line interpolation -- end */

    /* series overrides */
    var seriesOverrides = function () {
        var chart = new Chartist.Line('#seriesOverrides', {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
            // Naming the series with the series object array notation
            series: [
                {
                    name: 'series-1',
                    data: [5, 2, -4, 2, 0, -2, 5, -3]
                    },
                {
                    name: 'series-2',
                    data: [4, 3, 5, 3, 1, 3, 6, 4]
                    },
                {
                    name: 'series-3',
                    data: [2, 4, 3, 1, 4, 5, 3, 2]
                    }]
        }, {
            fullWidth: true,
            // Within the series options you can use the series names
            // to specify configuration that will only be used for the
            // specific series.
            series: {
                'series-1': {
                    lineSmooth: Chartist.Interpolation.step()
                },
                'series-2': {
                    lineSmooth: Chartist.Interpolation.simple(),
                    showArea: true
                },
                'series-3': {
                    showPoint: false
                }
            }
        }, [
                    // You can even use responsive configuration overrides to
                    // customize your series configuration even further!
                    ['screen and (max-width: 320px)',
                {
                    series: {
                        'series-1': {
                            lineSmooth: Chartist.Interpolation.none()
                        },
                        'series-2': {
                            lineSmooth: Chartist.Interpolation.none(),
                            showArea: false
                        },
                        'series-3': {
                            lineSmooth: Chartist.Interpolation.none(),
                            showPoint: true
                        }
                    }
                    }]
                ]);
    }
    /* series overrides -- end */

    /* bar chart */
    var barChart = function () {
        var data = {
            labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
            series: [
                        [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
                    ]
        };

        var options = {
            high: 10,
            low: -10,
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 2 === 0 ? value : null;
                }
            }
        };

        new Chartist.Bar('#barChart', data, options);
    }
    /* bar chart end */

    /* overlap bar mobile */
    var overlapBarMobile = function () {
        var data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            series: [
                        [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
                        [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
                    ]
        };

        var options = {
            seriesBarDistance: 10
        };

        var responsiveOptions = [
                    ['screen and (max-width: 640px)',
                {
                    seriesBarDistance: 5,
                    axisX: {
                        labelInterpolationFnc: function (value) {
                            return value[0];
                        }
                    }
                    }]
                ];

        new Chartist.Bar('#overlapBarMobile', data, options, responsiveOptions);
    }
    /* overlap bar mobile -- end */

    /* peak circles */
    var peakCircles = function () {
        // Create a simple bi-polar bar chart
        var chart = new Chartist.Bar('#peakCircles', {
            labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
            series: [
                        [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
                    ]
        }, {
            high: 10,
            low: -10,
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 2 === 0 ? value : null;
                }
            }
        });

        // Listen for draw events on the bar chart
        chart.on('draw', function (data) {
            // If this draw event is of type bar we can use the data to create additional content
            if (data.type === 'bar') {
                // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
                data.group.append(new Chartist.Svg('circle', {
                    cx: data.x2,
                    cy: data.y2,
                    r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
                }, 'ct-slice-pie'));
            }
        });
    }
    /* peak circles -- end */

    /* multi line labels */
    var multiLineLabels = function () {
        new Chartist.Bar('#multiLineLabels', {
            labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
            series: [
                        [60000, 40000, 80000, 70000],
                        [40000, 30000, 70000, 65000],
                        [8000, 3000, 10000, 6000]
                    ]
        }, {
            seriesBarDistance: 10,
            axisX: {
                offset: 60
            },
            axisY: {
                offset: 80,
                labelInterpolationFnc: function (value) {
                    return value + ' CHF'
                },
                scaleMinSpace: 15
            }
        });
    }
    /* multi line labels -- end */

    /* stacked bar */
    var stackedBar = function () {
        new Chartist.Bar('#stackedBar', {
            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
            series: [
                        [800000, 1200000, 1400000, 1300000],
                        [200000, 400000, 500000, 300000],
                        [100000, 200000, 400000, 600000]
                    ]
        }, {
            stackBars: true,
            axisY: {
                labelInterpolationFnc: function (value) {
                    return (value / 1000) + 'k';
                }
            }
        }).on('draw', function (data) {
            if (data.type === 'bar') {
                data.element.attr({
                    style: 'stroke-width: 30px'
                });
            }
        });
    }
    /* stacked bar -- end */

    /* horizontal bar */
    var horizontalBar = function () {
        new Chartist.Bar('#horizontalBar', {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            series: [
                        [5, 4, 3, 7, 5, 10, 3],
                        [3, 2, 9, 5, 4, 6, 4]
                    ]
        }, {
            seriesBarDistance: 10,
            reverseData: true,
            horizontalBars: true,
            axisY: {
                offset: 70
            }
        });
    }
    /* horizontal bar -- end */

    /* extream responsive */
    var extreamResponsive = function () {
        new Chartist.Bar('#extreamResponsive', {
            labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
            series: [
                        [5, 4, 3, 7],
                        [3, 2, 9, 5],
                        [1, 5, 8, 4],
                        [2, 3, 4, 6],
                        [4, 1, 2, 1]
                    ]
        }, {
            // Default mobile configuration
            stackBars: true,
            axisX: {
                labelInterpolationFnc: function (value) {
                    return value.split(/\s+/).map(function (word) {
                        return word[0];
                    }).join('');
                }
            },
            axisY: {
                offset: 20
            }
        }, [
                    // Options override for media > 400px
                    ['screen and (min-width: 400px)',
                {
                    reverseData: true,
                    horizontalBars: true,
                    axisX: {
                        labelInterpolationFnc: Chartist.noop
                    },
                    axisY: {
                        offset: 60
                    }
                    }],
                    // Options override for media > 800px
                    ['screen and (min-width: 800px)',
                {
                    stackBars: false,
                    seriesBarDistance: 10
                    }],
                    // Options override for media > 1000px
                    ['screen and (min-width: 1000px)',
                {
                    reverseData: false,
                    horizontalBars: false,
                    seriesBarDistance: 15
                    }]
                ]);
    }
    /* extream responsive -- end */

    /* distributed series */
    var distributedSeries = function () {
        new Chartist.Bar('#distributedSeries', {
            labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
            series: [20, 60, 120, 200, 180, 20, 10]
        }, {
            distributeSeries: true
        });
    }
    /* distributed series -- end */

    /* label palcement */
    var labelPlacement = function () {
        new Chartist.Bar('#labelPlacement', {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            series: [
                        [5, 4, 3, 7, 5, 10, 3],
                        [3, 2, 9, 5, 4, 6, 4]
                    ]
        }, {
            axisX: {
                // On the x-axis start means top and end means bottom
                position: 'start'
            },
            axisY: {
                // On the y-axis start means left and end means right
                position: 'end'
            }
        });
    }
    /* label palcement -- end */

    /* pie chart */
    var pieChart = function () {
        var data = {
            series: [5, 3, 4]
        };

        var sum = function (a, b) {
            return a + b
        };

        new Chartist.Pie('#pieChart', data, {
            labelInterpolationFnc: function (value) {
                return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
        });
    }
    /* pie chart -- end */

    /* pie chart labels */
    var pieChartLabels = function () {
        var data = {
            labels: ['Bananas', 'Apples', 'Grapes'],
            series: [20, 15, 40]
        };

        var options = {
            labelInterpolationFnc: function (value) {
                return value[0]
            }
        };

        var responsiveOptions = [
                    ['screen and (min-width: 640px)',
                {
                    chartPadding: 30,
                    labelOffset: 100,
                    labelDirection: 'explode',
                    labelInterpolationFnc: function (value) {
                        return value;
                    }
                    }],
                    ['screen and (min-width: 1024px)',
                {
                    labelOffset: 80,
                    chartPadding: 20
                    }]
                ];

        new Chartist.Pie('#pieChartLabels', data, options, responsiveOptions);
    }
    /* pie chart labels -- end */

    /* guage chart */
    var gaugeChart = function () {
        new Chartist.Pie('#gaugeChart', {
            series: [20, 10, 30, 40]
        }, {
            donut: true,
            donutWidth: 60,
            startAngle: 270,
            total: 200,
            showLabel: false
        });
    }
    /* guage chart -- end */

    /* donut fill */
    var donutFill = function () {
        new Chartist.Pie('#donutFill', {
            series: [20, 10, 30, 40]
        }, {
            donut: true,
            donutWidth: 60,
            donutSolid: true,
            startAngle: 270,
            showLabel: true
        });
    }
    /* donut fill -- end */

    /* guage chart fill */
    var gaugeChartFill = function () {
        new Chartist.Pie('#gaugeChartFill', {
            series: [20, 10, 30, 40]
        }, {
            donut: true,
            donutWidth: 60,
            donutSolid: true,
            startAngle: 270,
            total: 200,
            showLabel: true
        });
    }
    /* guage chart fill -- end */

    /* initilize all charts on DOM ready */
    $(document).ready(function () {
        lineChartArea();
        lineScattered();
        usingEvents();
        bipolar();
        smileAnimation();
        pathAnimation();
        lineInterpolation();
        seriesOverrides();
        barChart();
        overlapBarMobile();
        peakCircles();
        multiLineLabels();
        stackedBar();
        horizontalBar();
        extreamResponsive();
        distributedSeries();
        labelPlacement();
        pieChart();
        pieChartLabels();
        gaugeChart();
        donutFill();
        gaugeChartFill();
    });

})(jQuery);